<template>
    <div>
        <div>
            <div class="crumbs">
                <el-breadcrumb>
                    <el-breadcrumb-item>
                        <i class="el-icon-s-order"></i> 查询 / 历史委托
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>



        <el-card class="container">
            <!--搜索条件栏-->
            <el-row style="margin-bottom: 20px;">
                <!--自动提示框-->
                <el-col :span="4">
                    <code-input></code-input>
                </el-col>
                <!--日期选择器-->
                <div style="float: left;margin-left: 10px;">
                    <el-date-picker size="small" type="date" placeholder="选择日期" value-format="yyyyMMdd" v-model="this.query.startDate"></el-date-picker>-
                    <el-date-picker size="small" type="date" placeholder="选择日期" value-format="yyyyMMdd" v-model="this.query.endDate"></el-date-picker>
                </div>
                <!--搜索按钮-->
                <el-button style="float: left;margin-left: 10px;" size="small" type="primary" icon="el-icon-search" @click="handlerSearch">搜索</el-button>
            </el-row>
            <el-table :data="tableData.slice((query.currentPage - 1) * query.pageSize,query.currentPage * query.pageSize)" style="width: 100%" border :cell-style="cellStyle" @sort-change="changeTabSort">
                <el-table-column prop="time" label="委托时间" width="180" align="center"/>
                <el-table-column prop="code" label="股票代码" width="180" align="center"/>
                <el-table-column prop="name" label="名称" align="center"/>
                <el-table-column prop="price" label="委托价格" align="center"/>
                <el-table-column prop="ocount" label="委托数量" align="center"/>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">{{ scope.row.status == 1 ?'已成':'部测' }}</template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-button round type="primary" size="mini" style="margin-top: 2px;float: right" icon="el-icon-refresh" @click=""></el-button>
                <el-pagination  background layout="total,prev,pager,next" :current-page="query.currentPage" :page-size="query.pageSize" :total="dataTotalCount" @current-change="handlerPageChange"/>
            </div>

        </el-card>
    </div>
</template>

<script>
    import CodeInput from '../components/CodeInput';
    export default {
        name: "HisorderQuery",
        components:{
            CodeInput
        },
        data(){
            return {
                tableData:[
                    {
                        time:'09:40:00',
                        code:'000001',
                        name:'平安银行',
                        price:100,
                        ocount:10,
                        direction:'买入',
                        status:3
                    },
                    {
                        time:'10:40:00',
                        code:'000002',
                        name:'浦发银行',
                        price:100,
                        ocount:20,
                        direction:'买入',
                        status:1
                    },
                    {
                        time:'11:40:00',
                        code:'000003',
                        name:'桂林银行',
                        price:100,
                        ocount:10,
                        direction:'买入',
                        status:1
                    },

                ],
                balance:200,
                dataTotalCount:4,//总数
                query:{
                    currentPage:1,//当前页码
                    pageSize:2,//每页显示多少条
                    code:'',//股票代码
                    startDate:'',//开始时间
                    endDate:''//结束时间
                },

            }
        },
        methods:{
            handlerPageChange(val){
                this.$set(this.query,'currentPage' , val);
            },
            changeTabSort(column){
                if (column.order == 'descending'){
                    this.tableData = this.tableData.sort((a,b)=>{
                        b[column.prop] - a[column.prop]
                    })
                } else{
                    this.tableData = this.tableData.sort((a,b)=>{
                        a[column.prop] - b[column.prop]
                    })
                }
            },
            cellStyle({row,cloumn,rowIndex,cloumnIndex}){
                return "padding:2px"
            },
            updateSelectedCode(item){
               this.query.code =  item.code;
            },
            handlerSearch(){

            }
        },
        created(){
            this.$bus.on("codeinput-selected",this.updateSelectedCode)
        },
        beforeDestroy(){
            this.$bus.off("codeinput-selected",this.updateSelectedCode)
        }
    }
</script>

<style scoped>

</style>